<script setup lang="ts">
import '@/assets/css/index.css';
import {ref,onMounted} from 'vue';
import { totalTheme } from '@/stores'
import { useUserStore } from '@/stores'
import { getCatalogues } from '@/api'
import { setDynamicRoutes,pushRoute } from '@/router'
import { web_navigation, merchant_service } from '@/utils/index'


const user_store = useUserStore();
const theme = totalTheme();
const activeIndex = ref('1')
const text_color = ref('');
const background_color = ref('');
const character_color = ref('');

const logout_dialog = ref(false);

//接收省份的变量
const province = ref([])
const first_province = ref('');

// 判断是否登录
const login = ref(false)
const un_login_img = ref('src/assets/img/unlogin.svg');

// 输入搜索的内容
// const input = ref('');

const total_state = ref(true);


// 初始化页面
onMounted(() => {
  login.value = user_store.checkLogin();
  handleChangeState(theme.state)
  getProvince()
  links.value = loadAll()
  setDynamicRoutes({ web:"/home" })
})


const changeProvince = (value: string) => {
  first_province.value = value;
}

const handleSelect = ( key: string, keyPath: string[]) => {

}


// 获取省份
const getProvince = async () => {
  const { data } = await getCatalogues(["地区"])
  province.value = data[0].children
  first_province.value = province.value[0].value;
  return data;
}
// 切换主题
const handleChangeState = (value: boolean) => {
  total_state.value = value;
  if (total_state.value) {
    theme.changeTheme("dark")
  } else {
    theme.changeTheme("light")
  }
  text_color.value = theme.text_color;
  background_color.value = theme.background;
  character_color.value = "color:"+text_color.value+";";
}

// 退出登录
const login_out = () => {
  user_store.logout();
}

const handleSearch = () => {
  console.log(input.value)
}


const state = ref('')

interface LinkItem {
  value: string
  link: string
}

const links = ref<LinkItem[]>([])

const loadAll = () => {
  return [
    { value: 'vue', link: 'https://github.com/vuejs/vue' },
    { value: 'element', link: 'https://github.com/ElemeFE/element' },
    { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
    { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
    { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
    { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
    { value: 'babel', link: 'https://github.com/babel/babel' },
  ]
}

let timeout: ReturnType<typeof setTimeout>
const querySearchAsync = (queryString: string, cb: (arg: any) => void) => {
  const results = queryString
    ? links.value.filter(createFilter(queryString))
    : links.value

  clearTimeout(timeout)
  timeout = setTimeout(() => {
    cb(results)
  }, 5000 * Math.random())
}
const createFilter = (queryString: string) => {
  return (restaurant: LinkItem) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    )
  }
}

const handleSelects = (item: Record<string, any>) => {
  console.log(item)
}



</script>

<template>
  <el-header>
    <el-menu
      :index = "1"
      :default-active="activeIndex"
      class="header_menu"
      mode="horizontal"
      :background-color="background_color"
      :text-color="text_color"
      :active-text-color="'#000'"
      :ellipsis="false"
      @select="handleSelect">

      <el-menu-item  style="width: 250px;">
        <p :style="character_color" style="font-size:xx-large;color: #0051ff;height:100%;" @click="pushRoute('/')">
          <img src="@/assets/img/fish.svg" style="width:100px;height:100%;border: none;" alt=""/>
          双鱼</p>
      </el-menu-item>
      <el-sub-menu index="1">
        <template #title>
          <img src="@/assets/img/addressLogo.svg" style=";height: 40%;" alt=""/>
          <el-link :underline="false" :style="character_color">{{ first_province }}</el-link>
        </template>
        <div style="width: 400px">
          <el-link v-for="item in province" :key="item.key" :index="item.id"
                   :underline="false" @click="changeProvince(item.value)" :style="character_color" class="province">
            {{item.value}}
          </el-link>
        </div>
      </el-sub-menu>
      <el-sub-menu index="2">
        <template #title >网页导航</template>
        <div v-for="items in web_navigation" :key="items.name" class="web-navigation">
          <p>{{items.name}}</p>
          <div >
            <el-link v-for="item in items.children" :key="item.name" @click="pushRoute(item.path)"
                     class="web_navigation_item" :underline="false">
              {{item.name}}
            </el-link>
          </div>
        </div>
      </el-sub-menu>

      <div class="center_space" style="height: 100%;">
        <el-autocomplete
          v-model="state"
          :fetch-suggestions="querySearchAsync"
          @select="handleSelects"
          class="header_search"
          style="
            position: relative;
            left: 30%;
            top: 30%;
            transform: translateX(-30%) translateY(-30%);
            width: 350px;
            line-height: 60px;"
        >
          <template #append>
            <el-button  @click="handleSearch">
              <el-image src="src/assets/img/search.svg" style="width: auto;height: 20px;" alt=""/>
            </el-button>
          </template>
          <template #loading>
            <el-icon class="is-loading">
              <svg class="circular" viewBox="0 0 20 20">
                <g
                  class="path2 loading-path"
                  stroke-width="0"
                  style="animation: none; stroke: none"
                >
                  <circle r="3.375" class="dot1" rx="0" ry="0" />
                  <circle r="3.375" class="dot2" rx="0" ry="0" />
                  <circle r="3.375" class="dot4" rx="0" ry="0" />
                  <circle r="3.375" class="dot3" rx="0" ry="0" />
                </g>
              </svg>
            </el-icon>
          </template>
        </el-autocomplete>
      </div>

      <el-menu-item index="3">
          <router-link to="/">首页</router-link>
      </el-menu-item>
      <el-sub-menu index="4">
        <template #title >商家服务</template>
        <div class="merchant-service">
          <el-link v-for="items in merchant_service" :key="items.name" @click="pushRoute(items.path)"
                   class="merchant-service-item" :underline="false">
          {{items.name}}
          </el-link>
        </div>
      </el-sub-menu>
      <el-menu-item index="5">
        <router-link to="/customService" :style="character_color">协议规则</router-link>
      </el-menu-item>
      <el-menu-item index="6">
        <router-link to="/shopCar">购物车</router-link>
      </el-menu-item>
      <el-menu-item index="7">
        <router-link to="/about">关于我们</router-link>
      </el-menu-item>
      <el-sub-menu index="8" v-if="!login">
        <template #title><el-avatar :src="un_login_img" :style="{ backgroundColor: 'white' }"></el-avatar></template>
        <el-menu-item index="8-1">
          <router-link to="/login" style="width: 100%;" :style="character_color">登录 | 注册</router-link>
        </el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="9" v-else>
        <template #title><el-avatar :src="un_login_img"
                                    :style="{ backgroundColor: 'white' }">
        </el-avatar></template>
        <el-menu-item index="9-1">
          <router-link to="/settings" style="width: 100%; text-align: center;" :style="character_color">个人中心</router-link>
        </el-menu-item>
        <el-menu-item index="9-2">
          <router-link to="/help" style="width:100%;text-align: center;" :style="character_color">帮助</router-link>
        </el-menu-item>
        <el-menu-item index="9-3">
          <el-button type="text" style="width: 100%;" :style="character_color" @click="logout_dialog = true" plain>退出</el-button>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </el-header>

  <el-dialog
    v-model="logout_dialog"
    title="提示"
    width="500"
  >
    <span>确认退出登录吗？</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="logout_dialog = false">取消</el-button>
        <el-button type="primary" @click="login_out">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  
</template>

<style scoped>

.province{
  line-height: 30px;
  margin: 10px 10px 0 10px;
}
.province:hover{
  color: #77d5f6 !important;
}

.web-navigation{
  width: 600px;
  background-color: rgba(255, 255, 255, 0.5);
}

.web-navigation p{
  font-size: 15px;
  text-align: center;
  font-weight: bolder;
}

.web_navigation_item{
  width: 80px;
  margin: 10px 0 10px 0;
}

  .center_space{
    flex-grow: 1;
  }

  .header_menu{
    margin-left: -20px;
    background: url("@/assets/img/head.jpg") no-repeat center center;
    background-size: cover;
    width: 100vw;
  }
  .el-menu-item:hover {
    background-color: #94d3fa !important;
  }

  .header_search{
    position: relative;
    left: 30%;
    top: 30%;
    transform: translateX(-30%) translateY(-30%);
    width: 350px;
    height: 75%;
    border-radius: 20px;
  }


  .merchant-service{
    width: 200px;
  }
  .merchant-service-item{
    width: 100px;
    margin: 10px 0 10px 0;
  }


  .circular {
    display: inline;
    height: 30px;
    width: 30px;
    animation: loading-rotate 2s linear infinite;
  }
  .path {
    animation: loading-dash 1.5s ease-in-out infinite;
    stroke-dasharray: 90, 150;
    stroke-dashoffset: 0;
    stroke-width: 2;
    stroke: var(--el-color-primary);
    stroke-linecap: round;
  }
  .loading-path .dot1 {
    transform: translate(3.75px, 3.75px);
    fill: var(--el-color-primary);
    animation: custom-spin-move 1s infinite linear alternate;
    opacity: 0.3;
  }
  .loading-path .dot2 {
    transform: translate(calc(100% - 3.75px), 3.75px);
    fill: var(--el-color-primary);
    animation: custom-spin-move 1s infinite linear alternate;
    opacity: 0.3;
    animation-delay: 0.4s;
  }
  .loading-path .dot3 {
    transform: translate(3.75px, calc(100% - 3.75px));
    fill: var(--el-color-primary);
    animation: custom-spin-move 1s infinite linear alternate;
    opacity: 0.3;
    animation-delay: 1.2s;
  }
  .loading-path .dot4 {
    transform: translate(calc(100% - 3.75px), calc(100% - 3.75px));
    fill: var(--el-color-primary);
    animation: custom-spin-move 1s infinite linear alternate;
    opacity: 0.3;
    animation-delay: 0.8s;
  }
  @keyframes loading-rotate {
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes loading-dash {
    0% {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
    }
    50% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -40px;
    }
    100% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -120px;
    }
  }
  @keyframes custom-spin-move {
    to {
      opacity: 1;
    }
  }

</style>